<template>
  <div class="index-page">
    <xdh-map :zoom="15" :center="mapCenter" type="Amap" ref="testMap"  @ready="mapInit" :layer-config="layerConfig" @click="mapClick">

      <xdh-map-html v-for="(item, index) in points" :key="`img_${index}`"
      :position="item.pos" >
        <div class="point-tag" >
          <img class="point-img" :src="pointImg" alt="" v-show="index !== 0">
          <em class="text">{{item.name}}</em>
          <input type="checkbox" style="display:none" :id="`point_${index}`" v-model="points[index].open">

          <div class="tooltip" v-if="item.notice" v-show="points[index].open" >點擊具體區份可查看具體方塊</div>

          <div v-if="!item.notice" class="tooltip" v-show="points[index].open"
          :style="{'z-index': index === currentPointId ? 11 : 1}">
           <span>{{item.info.area}}-{{item.info.block}}{{item.info.seq}} {{item.info.street}}</span> <br/>
           <span>({{item.info.houseNumber}}) {{item.info.address}}</span>
          </div> 
          <label class="cover" :for="`point_${index}`" style=""  @click="showHighter(index)"></label> 
        </div>
      </xdh-map-html>
 

      <xdh-map-geo v-if="state"  ref="geo" :state="state" :draw-define="drawDefineFn" @click="areaClick" ></xdh-map-geo>
      <xdh-map-geo v-if="childState"  ref="geo" :state="childState" :draw-define="subDrawDefineFn" @click="subAreaClick"></xdh-map-geo>

       
    </xdh-map>
    <!-- <div class="notic">
      点击具体区份可查看具体方块
    </div> -->
  </div>

</template>
<style scoped lang="scss">
  .index-page {
    // width: 100%;
    height: 100%;
    .xdh-map-tooltip.test-map-tooltip.is-light{
      color: white;
      background: #44A4F8;
      &::after{
        border-top: 12px solid #44A4F8;
      }
    }
    .point-tag{
      position: relative;
      box-sizing: border-box;
      .point-img{
        width: 30px;
        height:30px;
        margin: 0;
      }
      .text{
        position: absolute;
        top: 0;
        left:0;
        right: 0;
        line-height: 20px;
        font-size: 12px;
        font-style: normal;
        color: white;
        text-align: center;
      }
      .cover{
        position: absolute;
        display: block;
        width: 100%;
        top:0;
        bottom:0;
        z-index: 4;
        // background: rgba(0,0,0,0.5);
      }
      .tooltip{
        // display: none;
        position: absolute;
        top: 0;
        left: 50%;
        padding: 5px;
        border-radius: 5px;
        background: white;
        box-shadow: 0 0 1px 3px rgba(0,0,0,0.2);
        transform: translate3d(-50%, -130%, 0);
        white-space:nowrap;
        text-align: center;
        &:after{
          content: '';
          position: absolute;
          left: 50%;
          bottom: -6px;
          display: block;
          margin-left: -6px;
          width: 12px;
          height:12px;
          background: white;
          transform: rotate(45deg);
          box-shadow: 2px 2px 1px 1px rgba(0,0,0,0.2);
          // box-shadow: 1px 1px 1px 3px rgba(0,0,0,0.3);
        }
      }
    }
  }
</style>
<script>
// import macau from '../../public/geo/test.json'
import {parseStyle} from 'xdh-map'
import axios from '@/utils/axios'
import {mapState} from 'vuex'
// import { transform, WGS84, GCJ02 } from 'gcoord'
const API_HOST = window.__config__.API_HOST
const DEPLOY_URL = window.__config__.DEPLOY_URL
const MAP_SERVER = window.__config__.MAP_HOST
const GEOJSON_NAME = window.__config__.GEOJSON_NAME_2
const pointImg = 'img/point2.png'
const Style = function(obj) {
  return parseStyle({
    className: 'Style',
    fill: {
      className: 'Fill',
      color: 'rgba(255,255,255,0)'
    },
    stroke: {
      className: 'Stroke',
      lineDash: [5, 5],
      color: 'red', // '#2C91EF',
      width: 2
    },
    text: {
      className: 'Text',
      text: obj.properties.areaName,
      font: '14px sans-serif', // Fantasy 
      stroke: {
        className: 'Stroke',
        width: 0,
        color: 'red' // '#2C91EF'
      },
      fill: {
        className: 'Fill',
        color: 'red' // '#2C91EF'
        // scale: 2,
      }
    }
  })
}
const subStyle = function(obj) {
  return parseStyle({
    className: 'Style',
    fill: {
      className: 'Fill',
      color: 'rgba(0,0,0,0)'
    },
    stroke: {
      className: 'Stroke',
      lineDash: [3, 3],
      color: '#2C91EF',
      width: 2
    },
    text: {
      className: 'Text',
      text: obj.properties.areaName,
      font: '12px sans-serif',
      stroke: {
        className: 'Stroke',
        width: 0,
        color: '#2C91EF'
      },
      fill: {
        className: 'Fill',
        color: '#2C91EF'
        // scale: 2,
      }
    }
  })
}
export default {
  data() {
    return {
      olMap: null,
      viewer: null,
      state: null,
      childState: null,
      mapCenter: [113.54680227986877, 22.189260975262872],
      pointImg: pointImg, // require('./img/point.png'),
      layerConfig: {
        Amap: {
          title: '高得地图',
          server: MAP_SERVER
        }
      },
      popups: [], // 暂时无用
      points: [{
        pos: [113.54188681731057, 22.194560055612925], // [113.54680227986877, 22.189260975262872],
        name: '', 
        open: true, 
        level: 1, 
        notice: true
      }],
      features: [],
      currentPointId: null,
      viewAreaId: ''
    }
  },
  computed: {
    ...mapState({
      authorKey: 'authorKey'
    })
  },
  watch: {
    authorKey(val) {
      if (val) {
        this.fetchMapData()
      }
    }
  },
  methods: {
    showHighter(index) {
      this.currentPointId = index
      setTimeout(() => {
        this.points[index].open = false
      }, 5000)
    },
    mapClick(e) {
      // console.log('map click')
      this.points.forEach((item) => {
        item.open = false
        item.level = 1
      })
    },
    areaClick(data, e, feature) {
      let zoomCenter = feature.getGeometry().getInteriorPoint().getCoordinates()
      let nowZoom = this.viewer.getZoom() >= 17 ? this.viewer.getZoom() : 17
      
      
      if (this.viewAreaId !== data.properties.areaId) {
        this.childState = null
        axios({
          methods: 'get',
          url: DEPLOY_URL + '/geo/sub/' + data.properties.areaId + '.json'
        }).then((res) => {
          if (res.data) {
            this.childState = res.data // transform(res.data, WGS84, GCJ02)
          }
        })
        
        this.viewAreaId = data.properties.areaId
      }
       
      this.viewer.animate({
        center: zoomCenter,
        duration: 500,
        zoom: nowZoom
      })
    },
    subAreaClick(data, e, feature) {
      // console.log(data)
      let nowZoom = this.viewer.getZoom() >= 18 ? this.viewer.getZoom() : 18
      this.viewer.animate({
        center: feature.getGeometry().getInteriorPoint().getCoordinates(),
        duration: 200,
        zoom: nowZoom
      })
    },
    mapInit(map, vm) {
      this.olMap = map
      this.viewer = this.olMap.getView() 
    },
    drawDefineFn(feature, obj) {
      let center = feature.getGeometry().getInteriorPoint()
     
      this.popups.push({
        point: center.getCoordinates(),
        properties: obj.properties,
        feature: feature
      })
      feature.setStyle(Style(obj))
    },
    subDrawDefineFn(feature, obj) {
      feature.setStyle(subStyle(obj))
    },
    fetchMapPoints() {
      axios({
        methods: 'get',
        url: API_HOST + '/api/v1/units/blockPosition',
        headers: {
          Authorization: this.authorKey
        }
      }).then((res) => {
        if (!res.data || res.data.status !== 0) return
        let result = res.data.data
         
        this.points = this.points.concat(result.map((item) => {
          return {pos: [item.rallyPointLat, item.rallyPointLng], info: {...item.unit}, name: item.blockName, open: false, level: 1}
        }))
        console.log(this.points)
      })
    } 
  },
  mounted() {
    if (this.authorKey) {
      setTimeout(() => {
        this.fetchMapPoints()
      }, 200) 
    }
     
    axios({
      methods: 'get',
      url: DEPLOY_URL + '/geo/' + GEOJSON_NAME
    }).then((res) => {
      this.state = res.data // transform(res.data, WGS84, GCJ02)
    }) 
    
    let This = this
    window.AndroidHandlePage = {}
    window.AndroidHandlePage.areaClick = function(areaId) {
      let targetFeature = This.popups.find((item) => { return item.properties.areaId === areaId }).feature

      let zoomCenter = targetFeature.getGeometry().getInteriorPoint().getCoordinates()
      let nowZoom = This.viewer.getZoom() >= 17 ? This.viewer.getZoom() : 17
      
      if (This.viewAreaId !== areaId) {
        This.childState = null
        axios({
          methods: 'get',
          url: DEPLOY_URL + '/geo/sub/' + areaId + '.json'
        }).then((res) => {
          if (res.data) {
            This.childState = res.data // transform(res.data, WGS84, GCJ02)
          }
        })
        
        This.viewAreaId = areaId
      }

      This.viewer.animate({
        center: zoomCenter,
        duration: 500,
        zoom: nowZoom
      })
    }
     
  }
}
</script>


